<script lang="ts" setup>
import { vTooltip } from "floating-vue";
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    tooltip?: string;
    modelValue?: string;
  }>(),
  {
    modelValue: "",
    tooltip: undefined,
  }
);

const emit = defineEmits<{
  (emit: "update:modelValue", value: string): void;
}>();

const value = computed({
  get: () => props.modelValue || "",
  set: (value: string) => emit("update:modelValue", value),
});
</script>

<template>
  <input
    v-model.lazy.trim="value"
    v-tooltip="tooltip"
    class="editor-block__actions-input"
  />
</template>

<style lang="scss">
.editor-block__actions-input {
  display: block;
  width: 5rem; // w-20
  border-radius: 0.375rem; // rounded-md
  border: 1px solid var(--editor-input-border);
  background-color: var(--editor-input-bg);
  padding: 0.25rem 0.5rem; // px-2 py-1
  font-size: 0.875rem; // text-sm
  color: var(--editor-input-text);

  &:hover {
    background-color: var(--editor-button-hover-bg);
  }

  &:focus {
    border-color: var(--editor-input-focus-border);
    outline: none;
    box-shadow: 0 0 0 1px var(--editor-input-focus-border);
  }
}
</style>
